<template>
  <view class="add-pic">
    <Upload
      class="upload-list"
      :uploadWidth="'300rpx'"
      :uploadHeight="'300rpx'"
      :fileList="upLoadImageBefore"
      @getUpLoadImage="getUpLoadImageBefore"
    >
      <view class="upload-file">
        <u--image
          class="infor-image"
          :showLoading="true"
          :src="iconAdd"
          width="80rpx"
          height="80rpx"
        ></u--image>
        <view class="title">施工图片</view>
      </view>
    </Upload>
    <Upload
      class="upload-list"
      :uploadWidth="'300rpx'"
      :uploadHeight="'300rpx'"
      @getUpLoadImageIng="getUpLoadImageIng"
      :fileList="upLoadImageIng"
    >
      <view class="upload-file">
        <u--image
          class="infor-image"
          :showLoading="true"
          :src="iconAdd"
          width="80rpx"
          height="80rpx"
        ></u--image>
        <view class="title">施工图片</view>
      </view>
    </Upload>
    <Upload
      class="upload-list"
      :uploadWidth="'300rpx'"
      :uploadHeight="'300rpx'"
      :fileList="upLoadImageAfter"
      @getUpLoadImageAfter="getUpLoadImageAfter"
    >
      <view class="upload-file">
        <u--image
          class="infor-image"
          :showLoading="true"
          :src="iconAdd"
          width="80rpx"
          height="80rpx"
        ></u--image>
        <view class="title">施工图片</view>
      </view>
    </Upload>
    <view class="bottom-btn">
      <view class="btn" @click="orderConfirm()">确 定</view>
    </view>
  </view>
</template>
<script>
import Upload from "@/components/upload/index.vue";
import iconAdd from "@/static/images/icon-add.png";
import { orderConfirm, getOrderDetail } from "@/api/order";
export default {
  components: { Upload },
  data() {
    return {
      iconAdd,
      upLoadImageBefore: [],
      upLoadImageIng: [],
      upLoadImageAfter: [],
      orderNo: "",
    };
  },
  onInit: function (option) {
    console.log(option);
  },
  onLoad: function (option) {
    this.orderNo = option.orderNo;
    this.getOrderDetail();
  },
  methods: {
    async getOrderDetail() {
      try {
        const res = await getOrderDetail(this.orderNo);
        let attachList = res.data && res.data.attachInfo;
        // 这里使用this.$set()回显已上传图片
        if (attachList[0]) {
          this.$set(this.upLoadImageBefore, 0, { url: attachList[0].url });
        }
        if (attachList[1]) {
          this.$set(this.upLoadImageIng, 0, { url: attachList[1].url });
        }
        if (attachList[2]) {
          this.$set(this.upLoadImageAfter, 0, { url: attachList[2].url });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 施工前
    getUpLoadImageBefore(e) {
      this.upLoadImageBefore = e;
    },
    // 施工中
    getUpLoadImageIng(e) {
      this.upLoadImageIng = e;
    },
    // 施工后
    getUpLoadImageAfter(e) {
      this.upLoadImageAfter = e;
    },
    // 添加施工图片
    async orderConfirm() {
      try {
        const parmas = {
          orderNo: this.orderNo,
          attachIds: [],
        };
        if (
          this.upLoadImageBefore &&
          this.upLoadImageBefore.length > 0 &&
          this.upLoadImageBefore[0].id
        ) {
          parmas.attachIds[0] = this.upLoadImageBefore[0].id;
        }
        if (
          this.upLoadImageIng &&
          this.upLoadImageIng.length > 0 &&
          this.upLoadImageIng[0].id
        ) {
          parmas.attachIds[1] = this.upLoadImageIng[0].id;
        }
        if (
          this.upLoadImageAfter &&
          this.upLoadImageAfter.length > 0 &&
          this.upLoadImageAfter[0].id
        ) {
          parmas.attachIds[2] = this.upLoadImageAfter[0].id;
        }
        await orderConfirm(parmas);
        uni.switchTab({
          url: "/pages/tabBar/staging/index",
        });
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.add-pic {
  margin: 0 20rpx;
  .upload-list {
    margin-top: 30rpx;
    background: #fff;
    padding: 20rpx;
    display: flex;
    align-items: center;
    ::v-deep {
      .u-upload__wrap {
        margin: 0 auto !important;
      }
    }
    .upload-file {
      width: 300rpx;
      height: 300rpx;
      background: #fafafa;
      border: 1rpx solid #d9d9d9;
      border-radius: 6rpx;
      overflow: hidden;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      .infor-image {
        margin-top: 100rpx;
      }
      .title {
        font-size: 26rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #12110e;
        line-height: 60rpx;
      }
    }
  }
  .bottom-btn {
    margin-top: 20rpx;
    .btn {
      position: fixed;
      bottom: 10rpx;
      left: 5%;
      width: 90%;
      height: 88rpx;
      background: #457ef6;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
      line-height: 88rpx;
      text-align: center;
    }
  }
}
</style>